<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 页面标题区域 -->
    <div class="bg-white shadow-sm border-b border-gray-200">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="text-center">
          <h1 class="text-4xl font-bold text-gray-900 mb-4">服务支持</h1>
          <nav class="flex justify-center" aria-label="Breadcrumb">
            <ol class="flex items-center space-x-2 text-sm text-gray-500">
              <li><a href="#" class="hover:text-blue-600">首页</a></li>
              <li><span class="mx-2">/</span></li>
              <li class="text-gray-900">服务支持</li>
            </ol>
          </nav>
        </div>
      </div>
    </div>

    <!-- 服务概览区域 -->
    <section class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">全方位服务体系</h2>
          <p class="text-xl text-gray-600">专业团队，贴心服务，为您的设备保驾护航</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div v-for="service in services" :key="service.id" 
               class="text-center group hover:bg-blue-50 p-6 rounded-lg transition-colors duration-300">
            <div class="bg-blue-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 group-hover:bg-blue-200 transition-colors duration-300">
              <svg class="w-10 h-10 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                <path :d="service.icon"></path>
              </svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-3">{{ service.title }}</h3>
            <p class="text-gray-600">{{ service.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 技术支持区域 -->
    <section class="py-20 bg-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div>
            <h2 class="text-4xl font-bold text-gray-900 mb-6">技术支持</h2>
            <div class="space-y-6">
              <div v-for="support in technicalSupports" :key="support.id" 
                   class="flex items-start space-x-4">
                <div class="flex-shrink-0">
                  <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
                    <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                    </svg>
                  </div>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ support.title }}</h3>
                  <p class="text-gray-600">{{ support.description }}</p>
                </div>
              </div>
            </div>
            <div class="mt-8">
              <button class="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors duration-200">
                联系技术支持
              </button>
            </div>
          </div>
          <div>
            <img 
              class="rounded-lg shadow-lg" 
              src="https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=technical%20support%20team%20engineers%20working%20on%20machinery%20maintenance%20professional%20service&image_size=landscape_4_3" 
              alt="技术支持团队" 
            />
          </div>
        </div>
      </div>
    </section>

    <!-- 售后服务流程 -->
    <section class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">售后服务流程</h2>
          <p class="text-xl text-gray-600">标准化服务流程，确保问题快速解决</p>
        </div>
        
        <div class="relative">
          <!-- 流程线 -->
          <div class="hidden lg:block absolute top-1/2 left-0 right-0 h-1 bg-blue-200 transform -translate-y-1/2"></div>
          
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
            <div v-for="(step, index) in serviceSteps" :key="step.id" class="text-center relative">
              <!-- 步骤圆圈 -->
              <div class="relative z-10 w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
                <span class="text-white font-bold text-lg">{{ index + 1 }}</span>
              </div>
              <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ step.title }}</h3>
              <p class="text-gray-600 text-sm">{{ step.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 常见问题 -->
    <section class="py-20 bg-gray-50">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">常见问题</h2>
          <p class="text-xl text-gray-600">快速找到您需要的答案</p>
        </div>
        
        <div class="space-y-4">
          <div v-for="faq in faqs" :key="faq.id" 
               class="bg-white rounded-lg shadow-lg overflow-hidden">
            <button 
              @click="toggleFaq(faq.id)"
              class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-50 transition-colors duration-200"
            >
              <h3 class="text-lg font-semibold text-gray-900">{{ faq.question }}</h3>
              <svg 
                :class="[expandedFaq === faq.id ? 'rotate-180' : '', 'w-5 h-5 text-gray-500 transition-transform duration-200']"
                fill="none" stroke="currentColor" viewBox="0 0 24 24"
              >
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
              </svg>
            </button>
            <div 
              v-show="expandedFaq === faq.id"
              class="px-6 pb-4 text-gray-600 border-t border-gray-100"
            >
              <div class="pt-4">{{ faq.answer }}</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 服务承诺 -->
    <section class="py-20 bg-blue-600">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-white mb-4">服务承诺</h2>
          <p class="text-xl text-blue-100">我们的承诺，您的保障</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div v-for="promise in servicePromises" :key="promise.id" 
               class="text-center text-white">
            <div class="text-4xl font-bold mb-2">{{ promise.value }}</div>
            <div class="text-lg font-semibold mb-2">{{ promise.title }}</div>
            <div class="text-blue-100">{{ promise.description }}</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">联系我们</h2>
          <p class="text-xl text-gray-600">多种联系方式，随时为您服务</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div v-for="contact in contacts" :key="contact.id" 
               class="text-center p-6 bg-gray-50 rounded-lg hover:bg-blue-50 transition-colors duration-300">
            <div class="bg-blue-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
              <svg class="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                <path :d="contact.icon"></path>
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ contact.title }}</h3>
            <p class="text-gray-600 mb-2">{{ contact.value }}</p>
            <p class="text-sm text-gray-500">{{ contact.description }}</p>
          </div>
        </div>
        
        <div class="mt-12 text-center">
          <div class="bg-blue-50 rounded-lg p-8">
            <h3 class="text-2xl font-bold text-gray-900 mb-4">紧急服务热线</h3>
            <div class="text-3xl font-bold text-blue-600 mb-2">400-888-9999</div>
            <p class="text-gray-600">24小时全天候服务，随时为您解决紧急问题</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 响应式数据
const expandedFaq = ref<number | null>(null)

// 服务项目
const services = ref([
  {
    id: 1,
    title: '技术咨询',
    description: '专业技术团队提供设备选型、工艺优化等技术咨询服务',
    icon: 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z'
  },
  {
    id: 2,
    title: '安装调试',
    description: '专业工程师现场指导设备安装调试，确保设备正常运行',
    icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z'
  },
  {
    id: 3,
    title: '维修保养',
    description: '定期维护保养服务，延长设备使用寿命，保证生产效率',
    icon: 'M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z'
  },
  {
    id: 4,
    title: '培训服务',
    description: '提供操作培训和技术培训，提升用户操作技能和维护能力',
    icon: 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253'
  }
])

// 技术支持项目
const technicalSupports = ref([
  {
    id: 1,
    title: '远程诊断',
    description: '通过远程连接快速诊断设备故障，提供解决方案'
  },
  {
    id: 2,
    title: '现场服务',
    description: '专业工程师现场服务，解决复杂技术问题'
  },
  {
    id: 3,
    title: '备件供应',
    description: '原厂备件供应，保证设备维修质量和可靠性'
  },
  {
    id: 4,
    title: '技术升级',
    description: '提供设备技术升级服务，提升设备性能和效率'
  }
])

// 服务流程
const serviceSteps = ref([
  {
    id: 1,
    title: '问题反馈',
    description: '客户通过电话、邮件等方式反馈问题'
  },
  {
    id: 2,
    title: '问题分析',
    description: '技术团队快速分析问题，制定解决方案'
  },
  {
    id: 3,
    title: '服务派遣',
    description: '派遣专业工程师提供现场或远程服务'
  },
  {
    id: 4,
    title: '问题解决',
    description: '执行解决方案，确保问题得到彻底解决'
  },
  {
    id: 5,
    title: '服务回访',
    description: '服务完成后进行回访，确保客户满意'
  }
])

// 常见问题
const faqs = ref([
  {
    id: 1,
    question: '设备出现故障时应该如何处理？',
    answer: '首先请停止设备运行，记录故障现象，然后联系我们的技术支持热线400-888-9999。我们的技术人员会指导您进行初步检查，如需现场服务，我们会在24小时内安排工程师到达现场。'
  },
  {
    id: 2,
    question: '设备保修期是多长时间？',
    answer: '我们的设备提供18个月的质保期（从设备验收合格之日起计算）。在保修期内，因设备质量问题导致的故障，我们提供免费维修服务。保修期外，我们提供有偿维修服务。'
  },
  {
    id: 3,
    question: '如何获得设备操作培训？',
    answer: '我们为每台设备提供免费的操作培训服务。培训包括设备操作、日常维护、故障排除等内容。您可以选择现场培训或到我公司培训中心参加培训。如需额外培训，我们也提供有偿培训服务。'
  },
  {
    id: 4,
    question: '备件如何订购？',
    answer: '您可以通过以下方式订购备件：1）拨打服务热线400-888-9999；2）发送邮件至service@company.com；3）联系您的销售代表。请提供设备型号、序列号和所需备件的详细信息。'
  },
  {
    id: 5,
    question: '是否提供设备升级服务？',
    answer: '是的，我们提供设备技术升级服务。根据技术发展和客户需求，我们会推出设备升级方案，包括硬件升级和软件升级。升级服务可以提升设备性能、增加新功能或改善操作体验。'
  }
])

// 服务承诺
const servicePromises = ref([
  {
    id: 1,
    value: '24小时',
    title: '响应时间',
    description: '接到服务请求后24小时内响应'
  },
  {
    id: 2,
    value: '18个月',
    title: '质保期',
    description: '设备质保期18个月，免费维修'
  },
  {
    id: 3,
    value: '99%',
    title: '客户满意度',
    description: '客户满意度达到99%以上'
  }
])

// 联系方式
const contacts = ref([
  {
    id: 1,
    title: '服务热线',
    value: '400-888-9999',
    description: '7×24小时服务热线',
    icon: 'M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z'
  },
  {
    id: 2,
    title: '邮箱地址',
    value: 'service@company.com',
    description: '技术支持邮箱',
    icon: 'M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'
  },
  {
    id: 3,
    title: '在线客服',
    value: 'QQ: 123456789',
    description: '工作时间在线咨询',
    icon: 'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'
  },
  {
    id: 4,
    title: '微信客服',
    value: 'WeChat: company_service',
    description: '扫码添加微信客服',
    icon: 'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'
  }
])

// 方法
const toggleFaq = (id: number) => {
  expandedFaq.value = expandedFaq.value === id ? null : id
}
</script>

<style scoped>
/* 平滑过渡效果 */
.transition-colors {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.transition-transform {
  transition: transform 0.2s ease;
}

/* 旋转动画 */
.rotate-180 {
  transform: rotate(180deg);
}

/* 悬停效果 */
.group:hover .group-hover\:bg-blue-200 {
  background-color: #bfdbfe;
}
</style>